<template>
	<view class="m-hotpack-wrap">
		<view class="m-hotpack">
			<view class="m-hotpack-content">
				<view class="m-hotpack-content-wrap">
					<view class="m-hotpack-item" v-for="(item,index) in hotpackList" :key="index">
						<view class="m-hotpack-item-left">
							<text class="m-hotpack-item-current">￥</text>
							<text class="m-hotpack-item-price">{{ item.discount }}</text>
						</view>
						<view class="m-hotpack-item-right">
							<view class="m-hotpack-item-title">{{item.name}}</view>
							<view class="m-hotpack-item-desc">
								<!-- <view>{{ item.cate_id==='0' ? '平台全商品通用' :item.cate_id.match(/[\u4e00-\u9fa5]+/)[0] +'专用' }}</view> -->
								<!-- <view>{{cateName[item.cate_name]}}</view> -->
								<view>有效期至{{ transDate(item.end_time) }}</view>
							</view>
						</view>
						<view @tap="getCoupons(item.id,item.is_had)" class="m-hotpack-item-btn" :class="{'disabled':item.is_had}"></view>
					</view>
				</view>
			</view>
			<view class="m-hotpack-close" @tap="closeHotpack"></view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				cateName:{
					'group':'团购',
					'meal':'餐饮',
					'appoint':'到家',
					'shop':'食材',
					'mall':'商城',
					'village_group':'融客隆鲜生',
					'all':'全品类通用',
					'store':'优惠买单',
				}
			}
		},
		props:{
			hotpackList:{
				default:[],
				type:Array
			}
		},	
		methods:{
			transDate(timestamp){
				function add0(m){return m<10?'0'+m:m }
				timestamp = timestamp * 1000
				var time = new Date(timestamp);
				var y = time.getFullYear();
				var m = time.getMonth()+1;
				var d = time.getDate();
				return y+'.'+add0(m)+'.'+add0(d);
			},
			closeHotpack(){
				this.$emit('closeHotpack')
			},
			getCoupons(coupon_id,is_had){
				if(is_had){
					console.log('这张优惠券已经有了')
					return
				}
				this.$emit('getCoupons',coupon_id)
			}
		}
	}
</script>

<style lang="scss">
	.m-hotpack-item {
		position: relative;
		display: flex;
		align-items: center;
		width:100%;
		height:121upx;
		margin-top:16upx;
		padding: 24upx 0;
		background-image: url('');
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	
	.m-hotpack-item:first-child {
		margin-top: 0;
	}
	
	.m-hotpack-item-left {
		width:90upx;
		text-align: center;
		color:#ee2c23;
	}
	
	.m-hotpack-item-price {
		font-size:20px;
		font-weight: bold;
	}
	
	.m-hotpack-item-right {
		position: relative;
		width:326upx;
		padding-left:20upx;
		padding-right:60upx;
		box-sizing: border-box;
	}
	
	.m-hotpack-item-title {
		font-size:14px;
		font-weight: bold;
	}
	
	.m-hotpack-item-desc {
		font-size:10px;
		color:#a0a0a0;
		line-height: 1.5;
		margin-top:6upx;
	}
	
	.m-hotpack-item-btn{
		z-index: 999999999999999999999999999999;
		position: absolute;
		right:10upx;
		top:0;
		width:200upx;
		height:100%;
		background-image: url('');
		background-position: right center;
		background-repeat: no-repeat;
		background-size: 60upx;
	}
	
	.m-hotpack-item-btn.disabled {
		background-image: url('');
	}
	
	
	.m-hotpack-wrap
	{
		z-index: 9999999991;
		position: fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background: rgba(0,0,0,0.5);
	}
	.m-hotpack {
		position: absolute;
		left:50%;
		top:45%;
		margin-left:-40vw;
		margin-top:-70vw;
		width:80vw;
		height: 140vw;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		background-image: url('');
	}
	
	.m-hotpack-content {
		position: absolute;
		bottom: 6vw;
		left:50%;
		margin-left:-29vw;
		width: 56vw;
		height: 54vw;
		overflow-y: auto;
	}
	
	.m-hotpack-close {
		position: absolute;
		bottom: -12vw;
		left:50%;
		margin-left:-4.5vw;
		width:9vw;
		height:9vw;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 90%;
		background-image: url("");
	}
	
</style>
